<template>
  <div class="book-rack-item">
    <div :class="item.check ? 'active' : ''"></div>
    <image-view width="100%" height="2rem" :item="item.img"></image-view>
    <span class="book-rack-item-name">{{ item.id }}:{{ item.bookName }}</span>
  </div>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
    },
  },
}
</script>

<style lang="scss" scoped>
.book-rack-item {
  width: 1.6rem;
  height: 2.5rem;
  margin: 5px;
  background: #eee;
  position: relative;
  .book-rack-item-name {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
  }
  .active {
    width: 100%;
    height: 100%;
    position: absolute;
    background: #000;
    opacity: 0.6;
    // background: red;
  }
}
</style>
